import routes from '../routes/sidebar'
import { NavLink, Link , useLocation} from 'react-router-dom'
import {useEffect ,useState} from 'react'
import { useDispatch } from 'react-redux';
import SidebarSubmenu from './SidebarSubmenu';
import XMarkIcon  from '@heroicons/react/24/outline/XMarkIcon'
import { setShow } from '../app/store/leftBarStatusSlice';
import {useSelector} from 'react-redux';
import _ from 'lodash'

function LeftSidebar(){
    const location = useLocation();
    const dispatch = useDispatch()
    const [roleRoutes, setRoleRoutes] = useState(routes)

    const userInfo = useSelector(state => state.userInfo)

    useEffect(() => {
        var currentRole = []
        if(userInfo && userInfo.roleType){
            currentRole = _.filter(routes, function(route){
                return  _.includes(route.roleType , userInfo.roleType)
            })
            setRoleRoutes(currentRole)
        }
    }, [userInfo.ticket])

    return(
        <div className="drawer-side  z-30  ">
            {/* <label htmlFor="left-sidebar-drawer" className="drawer-overlay"></label> */}
            <ul className="menu  pt-2 w-80 bg-base-100 min-h-full   text-base-content">
            {/* <label htmlFor="left-sidebar-drawer"  className="btn btn-ghost drawer-button bg-base-300  btn-circle z-50 top-0 right-0 mt-4 mr-2 absolute" onClick={() => toggle()}>
            <XMarkIcon className="h-5 inline-block w-5"/>
            </label> */}

                <li className="mb-2 font-semibold text-xl">
                    <Link><img className="mask mask-squircle w-10" src="/logo.svg" alt="DashWind Logo"/>大鱼选校</Link> </li>
                { roleRoutes.map((route, k) => {
                        return(
                            <li className="" key={k}>
                                {
                                    route.submenu ? 
                                        <SidebarSubmenu {...route}/> : 
                                    (<NavLink
                                        end
                                        to={route.path}
                                        className={({isActive}) => `${isActive ? 'font-semibold  bg-base-200 ' : 'font-normal'}`} >
                                           {route.icon} {route.name}
                                            {
                                                location.pathname === route.path ? (<span className="absolute inset-y-0 left-0 w-1 rounded-tr-md rounded-br-md bg-primary "
                                                aria-hidden="true"></span>) : null
                                            }
                                    </NavLink>)
                                }
                                
                            </li>
                        )
                    })
                }

            </ul>
        </div>
    )
}

export default LeftSidebar